<template>
  <Dialog v-model="dialogVisible" title="系统提示">
    <div class="info-content">
      <div class="info-title">上传成功数量：{{ successInfo.num }}</div>
      <div class="info-list">
        <div v-for="(d, index) in successInfo.info" :key="index">{{ d }}</div>
      </div>
      <div class="info-title title2">导入失败数量：{{ failureInfo.num }}</div>
      <div class="info-list">
        <div v-for="(d, index) in failureInfo.info" :key="index">{{ d }}</div>
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ImportResponse' })

const dialogVisible = ref(false) // 弹窗的是否展示
interface InfoType {
  num: number,
  info: string[]
}
const successInfo = ref<InfoType>({
  num: 0,
  info: []
})
const failureInfo = ref<InfoType>({
  num: 0,
  info: []
})
/** 打开弹窗 */
const open = async (data: any) => {
  dialogVisible.value = true
  successInfo.value = {
    num: data.createPromptNames.length,
    info: data.createPromptNames
  }
  let arr:string[] = []
  for (const d in data.failurePromptNames) {
    arr.push(d + ': ' + data.failurePromptNames[d])
  }
  failureInfo.value = {
    num: Object.keys(data.failurePromptNames).length,
    info: arr
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 文件上传成功 */
const emits = defineEmits(['success'])

</script>

<style lang="scss" scoped>
.info-content {
  padding: 0px 15px;
  .info-title {
    font-weight: 600;
  }
  .title2 {
    margin-top: 20px;
  }
  .info-list {
    margin-left: 20px;
    font-size: 12px;
  }
}
</style>
